<!--
 * @文件名称：  vuexState.vue
 * @包路径：   vuexMutation
 * @版权所有：q
 *
 * @文件描述:  vuexMutation
 * @版本:       vuexMutation
 * @作者        zhangshumiao
 * @创建时间    2020/5/11 17:24
 *
 * @修改记录：vuexMutation
  -----------------------------------------------------------------------------------------------
   ----------- 时间      |   修改人    |     修改的方法       |         修改描述   ---------------
  -----------------------------------------------------------------------------------------------
-->
<template>
  <div>
    {{count}}
    {{num}}
<!--    {{countAlias}}-->
<!--    {{countPlusLocalState}}-->

    <el-button @click="increment">改变state中的count值</el-button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
// import { createNamespacedHelpers } from 'vuex'
// const { mapState } = createNamespacedHelpers('stateIndex')
export default {
  name: 'vuexMutation',
  data() {
    return {
      localCount: 1
    }
  },
  mounted() {
  },
  // computed: {
  //   count() {
  //     return this.$store.state.stateIndex.count;
  //   }
  // },
  /**
  // 辅助函数 mapState
  computed: mapState({
    // 箭头函数
    count: state => state.count,
    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',
    Num: 'num',
    // 为了能够使用this获取局部状态
    countPlusLocalState(state) {
      return state.count + this.localCount
    }
  }),
  */
  // 当组件中计算属性的名称和state节点名称相同时，可以使用一个字符串数组
  // computed: mapState([
  //   'count', 'num'
  // ]),
  // mapState函数和组件内计算属性混用
  computed: {
  //   countAlias() {
  //     return this.$store.state.count
  //   },
  //   ...mapState(['count'])
    // ...mapState({
    //   count: state => state.stateIndex.count,
    //   num: state => state.stateIndex.num
    // })
    ...mapState({
      // count: state => state.stateIndex.count,
      count(state) {
        return state.stateIndex.count + this.localCount
      },
      num: state => state.stateIndex.num
    })
  },
  methods: {
    increment() {
      /**
        mapState 辅助函数，如果一个组件有多个状态需要管理，使用计算属性computed就是重复太多了，这时可以使用辅助函数mapState
        使用commit去提交修改值的时候，可以传一个参数，对应的在mutations中的第二个参数可以去修改state的值，第一个参数是state
       * */
      this.$store.commit('increment');
      this.$store.commit('dataNum', '这是从组件传给vuex的值');
      console.log(this.$store);
      console.log(this.$store.state.stateIndex.count);
      console.log(this.num)
      console.log(this.count)
    }
  }
}
</script>

<style scoped>

</style>
